<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .num{
            margin-right: 20px;
            display: inline-block;
        }
        /*  动画入场时刻  */
        .list-enter,.list-leave-to{
            opacity: 0;
            transform: translateY(30px);
        }
        .list-enter-active,.list-leave-active{
            transition: all 2s ease;
        }
        .list-move{
            transition: all 1s ease;
        }
        .list-leave-active{
            position: absolute;
        }
    </style>
</head>
<body>
<div id="test">
    {{msg}}
    <br>
    <button type="button" @click="add">add</button>
    <button type="button" @click="remove">remove</button>
    <transition-group tag="p" name="list" appear>
    <!--    tag标签把span变为p标签    -->
        <span v-for="item of list" :key="item" class="num">{{item}}</span>
    </transition-group>

<!--    <ul>-->
<!--        <li v-for="item of list">-->
<!--            {{item}}-->
<!--        </li>-->
<!--    </ul>-->
</div>
<script>
    var vue = new Vue({
        el: '#test',
        data: {
            msg: 'wangziyuan 真棒啊！',
            list: [1, 2, 3, 4] //command+option+L
        },
        methods: {
            randomIndex(){
                return Math.floor(Math.random() * this.list.length)
            },
            add(){
                let num = parseInt(Math.random()*10);
                if(this.list.indexOf(num) == -1){
                    this.list.push(num);
                }
            },
            remove(){
                //splice参数1：删除的元素开始索引 参数2：删除几个元素
                this.list.splice(this.randomIndex(),1)
            }
        }
    })
</script>
</body>
</html>
